<template>
  <h1>子组件渲染检测监视属性的变化</h1>
  <p>用户名字:{{ user.name }}</p>
  <p>用户的年龄是{{ user.age }}</p>
  <p>汽车品牌:{{ user.car.price }}</p>

  <button @click="user.age++">点击修改年龄</button>
  <button @click="user.car.price++">点击修改价格</button>
</template>

<script>
import { reactive, watch } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    // 对象属性要动态渲染 要使用reactive
    let user = reactive({
      name: "hash",
      age: 20,
      car: {
        brand: "奥迪",
        price: 100000,
      },
    });
    // 开启监视
    watch([() => user.car.price, () => user.age], (newValue, oldValue) => {
      // 检测价格是否变动
      console.log(newValue, oldValue);
    });

    return {
      user,
    };
  },
};
</script>

<style>
</style>